<template>
	<view class="release-page" :style="{background: backgroundGradient}">
		<!-- 科技风格背景 -->
		<view class="tech-background">
			<view class="circuit-line line-1" :style="{background: circuitGradient}"></view>
			<view class="circuit-line line-2" :style="{background: circuitGradient}"></view>
			<view class="circuit-line line-3" :style="{background: circuitGradient}"></view>
			<view class="circuit-line line-4" :style="{background: circuitGradient}"></view>
			<view class="glow-orb orb-1" :style="{background: orbGradient1}"></view>
			<view class="glow-orb orb-2" :style="{background: orbGradient2}"></view>
			<view class="glow-orb orb-3" :style="{background: orbGradient3}"></view>
			<view class="grid-overlay" :style="{backgroundImage: gridPattern}"></view>
		</view>
		
		<view class="page-header">
			<text class="page-title" :style="{textShadow: titleShadow}">📝 发布图文</text>
			<text class="page-subtitle">分享你的精彩内容</text>
		</view>

		<view class="page-card" :style="{borderTopColor: cardBorderColor}">
			<view class="coming-soon">
				<view class="icon" :style="{color: accentColor}">🚀</view>
				<text class="title" :style="{color: accentColor}">功能开发中</text>
				<text class="desc">敬请期待...</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getThemeStyles } from '@/stores/theme'

const themeColors = ref<any>({})

onMounted(() => {
	themeColors.value = getThemeStyles()
})

// 十六进制颜色转RGB
const hexToRgb = (hex: string) => {
	const color = hex.replace('#', '')
	const r = parseInt(color.substring(0, 2), 16)
	const g = parseInt(color.substring(2, 4), 16)
	const b = parseInt(color.substring(4, 6), 16)
	return `${r}, ${g}, ${b}`
}

// 加深颜色
const darkenColor = (hex: string, factor: number) => {
	const color = hex.replace('#', '')
	const r = Math.floor(parseInt(color.substring(0, 2), 16) * factor)
	const g = Math.floor(parseInt(color.substring(2, 4), 16) * factor)
	const b = Math.floor(parseInt(color.substring(4, 6), 16) * factor)
	return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
}

// 计算属性
const backgroundGradient = computed(() => {
	const primary = themeColors.value.primaryColor || '#667eea'
	const secondary = themeColors.value.secondaryColor || '#764ba2'
	return `linear-gradient(135deg, ${darkenColor(primary, 0.1)} 0%, ${darkenColor(secondary, 0.2)} 50%, ${darkenColor(primary, 0.15)} 100%)`
})

const accentColor = computed(() => themeColors.value.accentColor || '#667eea')

const accentColorRgb = computed(() => hexToRgb(accentColor.value))

const circuitGradient = computed(() => 
	`linear-gradient(90deg, transparent 0%, rgba(${accentColorRgb.value}, 0.5) 50%, transparent 100%)`
)

const orbGradient1 = computed(() => 
	`radial-gradient(circle, rgba(${accentColorRgb.value}, 0.4) 0%, transparent 70%)`
)

const orbGradient2 = computed(() => {
	const secondary = themeColors.value.secondaryColor || '#764ba2'
	const rgb = hexToRgb(secondary)
	return `radial-gradient(circle, rgba(${rgb}, 0.3) 0%, transparent 70%)`
})

const orbGradient3 = computed(() => {
	const info = themeColors.value.infoColor || '#57c5b6'
	const rgb = hexToRgb(info)
	return `radial-gradient(circle, rgba(${rgb}, 0.3) 0%, transparent 70%)`
})

const gridPattern = computed(() => 
	`linear-gradient(rgba(${accentColorRgb.value}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${accentColorRgb.value}, 0.1) 1px, transparent 1px)`
)

const titleShadow = computed(() => 
	`0 0 20rpx rgba(${accentColorRgb.value}, 0.5), 0 0 30rpx rgba(${accentColorRgb.value}, 0.3)`
)

const cardBorderColor = computed(() => 
	`rgba(${accentColorRgb.value}, 0.3)`
)
</script>

<style lang="scss">
.release-page {
	position: relative;
	min-height: 100vh;
	height: 100vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
}

/* 科技风格背景 */
.tech-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

/* 网格背景 */
.grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 50rpx 50rpx;
	animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(50rpx, 50rpx);
	}
}

/* 电路线条 */
.circuit-line {
	position: absolute;
	animation: circuitFlow 8s linear infinite;
}

.line-1 {
	top: 15%;
	left: -100%;
	width: 200%;
	height: 2rpx;
	animation-delay: 0s;
}

.line-2 {
	top: 35%;
	right: -100%;
	width: 150%;
	height: 2rpx;
	animation: circuitFlowReverse 10s linear infinite;
	animation-delay: 1s;
}

.line-3 {
	top: 55%;
	left: -100%;
	width: 180%;
	height: 2rpx;
	animation-delay: 2s;
}

.line-4 {
	top: 75%;
	right: -100%;
	width: 160%;
	height: 2rpx;
	animation: circuitFlowReverse 12s linear infinite;
	animation-delay: 3s;
}

@keyframes circuitFlow {
	0% {
		transform: translateX(-50%);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes circuitFlowReverse {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(-50%);
		opacity: 0;
	}
}

/* 发光球体 */
.glow-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40rpx);
	animation: orbFloat 6s ease-in-out infinite;
}

.orb-1 {
	top: 10%;
	left: 10%;
	width: 200rpx;
	height: 200rpx;
	animation-delay: 0s;
}

.orb-2 {
	top: 50%;
	right: 15%;
	width: 160rpx;
	height: 160rpx;
	animation-delay: 2s;
}

.orb-3 {
	bottom: 20%;
	left: 20%;
	width: 180rpx;
	height: 180rpx;
	animation-delay: 4s;
}

@keyframes orbFloat {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(30rpx, -30rpx) scale(1.1);
	}
	66% {
		transform: translate(-20rpx, 20rpx) scale(0.9);
	}
}

.page-header {
	position: relative;
	padding: 60rpx 40rpx 40rpx;
	text-align: center;
	flex-shrink: 0;
	z-index: 1;
}

.page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12rpx;
	letter-spacing: 2rpx;
}

.page-subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.page-card {
	position: relative;
	flex: 1;
	margin: 0;
	padding: 40rpx 32rpx 32rpx;
	border-radius: 32rpx 32rpx 0 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	z-index: 1;
	border-top-width: 2rpx;
	border-top-style: solid;
}

.coming-soon {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 40rpx;
}

.icon {
	font-size: 120rpx;
	margin-bottom: 32rpx;
	animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20rpx);
	}
}

.title {
	font-size: 40rpx;
	font-weight: 600;
	margin-bottom: 16rpx;
}

.desc {
	font-size: 28rpx;
	color: #999;
}
</style>
